content/blog-post-2026-06-26/accessibility-in-2026-a-practical-guide.mdx (2)

24-34: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Replace vacuous example with an actual accessibility pattern.

The useModernPattern example doesn't demonstrate any accessibility technique and would confuse readers expecting practical guidance. Replace it with a real 2026-relevant pattern such as focus management, reduced motion preference, or keyboard navigation.

// Example: respecting user motion preferences
function usePrefersReducedMotion() {
  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);

  React.useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    setPrefersReducedMotion(mediaQuery.matches);
    
    const handler = (event: MediaQueryListEvent) => {
      setPrefersReducedMotion(event.matches);
    };
    mediaQuery.addEventListener('change', handler);
    return () => mediaQuery.removeEventListener('change', handler);
  }, []);

  return prefersReducedMotion;
}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@content/blog-post-2026-06-26/accessibility-in-2026-a-practical-guide.mdx`
around lines 24 - 34, The example in useModernPattern is just a placeholder and
does not show a real accessibility technique, so replace it with a practical
pattern readers can use, such as focus management, reduced motion, or keyboard
navigation. Update the snippet to a concrete accessibility hook/example with
real behavior, and rename the symbol to something specific like
usePrefersReducedMotion or another actual pattern so the code and surrounding
explanation clearly match the accessibility topic.

---

53-71: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Demonstrate accessible patterns in the "Real-World Example."

The component uses generic <div> wrappers and lacks semantic structure, selection state, and robust key handling. In an accessibility guide, readers will copy this pattern verbatim.

// Accessible list of actionable items
interface Props {
  items: string[];
  activeItem: string | null;
  onActivate: (value: string) => void;
}

function AccessibleActionList({ items, activeItem, onActivate }: Props) {
  return (
    <ul role="list" aria-label="Available actions">
      {items.map((item, index) => (
        <li key={`${item}-${index}`}>
          <button
            aria-pressed={activeItem === item}
            onClick={() => onActivate(item)}
            className="focus:ring-2 focus:ring-offset-2"
          >
            {item}
          </button>
        </li>
      ))}
    </ul>
  );
}

Also note: key={item} at line 64 is unsafe if data contains duplicates or is reordered. Use a stable identifier or composite key.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@content/blog-post-2026-06-26/accessibility-in-2026-a-practical-guide.mdx`
around lines 53 - 71, The “Real-World Example” in the accessibility guide should
be updated to demonstrate a semantic, accessible pattern instead of a generic
wrapper-based list. Replace the current Component example with a clearer
accessible list component (for example, an AccessibleActionList-style pattern)
that uses list semantics, exposes selection state, and includes a
keyboard/focus-friendly button interaction. Also fix the keying strategy in the
map callback by avoiding a raw item key from the current Component and using a
stable unique identifier or composite key so duplicates and reordering are
handled safely.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes